<template>
	<view class="page-content">
		<view class="form-box">
			<form-item-title text="宠物照片"></form-item-title>
			<view style="padding: 30rpx 70rpx;background-color: #FFF;border-radius: 16rpx;margin-bottom: 32rpx;">
				<view class="flex-row items-center justify-around">
					<u-upload ref="zmref" :header="header" :action="action" max-count="1" upload-text="正面" @on-success="successZM"
						@on-remove="removeZM" height="136" width="136"></u-upload>
					<u-upload ref="zcref" :header="header" :action="action" max-count="1" upload-text="左侧" @on-success="successZC"
						@on-remove="removeZC" height="136" width="136"></u-upload>
					<u-upload ref="ycref" :header="header" :action="action" max-count="1" upload-text="右侧" @on-success="successYC"
						@on-remove="removeYC" height="136" width="136"></u-upload>
				</view>
				<view style="font-weight: 500;font-size: 24rpx;color: #FF7676;text-align: center;">
					注：请上传宠物头部三个面的清晰照片
				</view>
			</view>

			<form-item-title text="宠物信息"></form-item-title>
			<view class="form-box">
				<u-form :label-style="labelStyle">
					<u-form-item label="宠物名"><u-input input-align="right" v-model="formdata.name" /></u-form-item>
					<u-form-item label="品种"><u-input input-align="right" v-model="formdata.breed" /></u-form-item>
					<u-form-item label="性别"><u-input input-align="right" v-model="sexlabel" disabled
							@click="showSex=true" /></u-form-item>
					<u-form-item label="年龄"><u-input type="number" input-align="right" v-model="formdata.age" disabled
							@click="changeAge(index)" placeholder="请选择" /></u-form-item>
					<u-form-item label="颜色"><u-input input-align="right" v-model="formdata.colour" /></u-form-item>
					<u-form-item label="体重"><u-input input-align="right" v-model="formdata.weight" /></u-form-item>
					<u-form-item label="疫苗接种信息"><u-switch slot="right" active-color="#FCD610"
							v-model="formdata.ifVaccination"></u-switch></u-form-item>
				</u-form>
			</view>
		</view>
		<u-select v-model="selectageshow" mode="mutil-column" :list="agelist" @confirm="ageconfirm"></u-select>
		<u-select v-model="showSex" mode="single-column" :list="sexlist" @confirm="handlesexconfirm"></u-select>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	export default {
		data() {
			return {
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap"
				},
				action: this.$config.mobeilURL + "/common/uploadFile", // 演示地址
				header: {
					"content-type": "multipart/form-data",
					"Authorization": uni.getStorageSync('cxbtoken')
				},
				zmList: [],
				zcList: [],
				ycList: [],
				formdata: {
					name: "",
					age: "",
					breed: "",
					certificateId: 0,
					colour: "",
					feature: "",
					frontalView: "",
					ifVaccination: false,
					lat: 0,
					leftSideView: "",
					lng: 0,
					lossAddress: "",
					remark: "",
					rewardAmount: "",
					rightSideView: "",
					sex: "",
					weight: "",
				},
				showSex: false,
				sexlist: [{
						value: 0,
						label: '公'
					},
					{
						value: 1,
						label: '母'
					}
				],
				sexlabel: '',
				selectageshow: false,
				agelist: [
					[],
					[{
						value: '年',
						label: '年'
					}],
					[],
					[{
						value: '月',
						label: '月'
					}],
				]
			};
		},
		methods: {
			successZM(data, index) {
				if (data.code !== 200) {
					this.$refs.zmref.lists[index].error = true;
				} else {
					this.zmList.push(data.accessPath);
					this.formdata.frontalView = data.accessPath;
				}
			},
			removeZM(index) {
				this.zmList.splice(index, 1);
				this.formdata.frontalView = '';
			},
			successZC(data, index) {
				if (data.code !== 200) {
					this.$refs.zcref.lists[index].error = true;
				} else {
					this.zcList.push(data.accessPath);
					this.formdata.leftSideView = data.accessPath;
				}
			},
			removeZC(index) {
				this.zcList.splice(index, 1);
				this.formdata.leftSideView = "";
			},
			successYC(data, index) {
				if (data.code !== 200) {
					this.$refs.ycref.lists[index].error = true;
				} else {
					this.ycList.push(data.accessPath);
					this.formdata.rightSideView = data.accessPath;
				}
			},
			removeYC(index) {
				this.ycList.splice(index, 1);
				this.formdata.rightSideView = "";
			},
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		width: 100%;
		padding: 0 32rpx;
		background: linear-gradient(180deg, #FCD610 0%, #F6F6F6 20%, #F6F6F6 100%);
		overflow-y: auto;
	}
</style>